<template>
    <div class="HomeLogin">
        <h1 class="DeliveryH1">
<router-link to="/" class="icon" active-class=" iconAct"> </router-link>

            新主人注册页面</h1>
        <div class="body">
            <img class="wid" src="../../static/img1/login.jpg">
            <div class="quan">
                <img src="../../static/img1/btn2.jpg">
                <img src="../../static/img1/btn1.jpg">
    
                <img src="../../static/img1/quan1.jpg">
                <img src="../../static/img1/quan2.jpg">
            </div>
            <!--*******************进店必选*******************-->
            <h2 class="borderp-top">进店必选</h2>
    
            <div class="essential">
                <figure class="Pub-figure" v-for="(val, index) in products" :key="index">
                    <img :src="val.pic">
                    <figcaption class="Pub-figcaption">
                        <h2 class="Pub-figcp-h2">{{val.name}}</h2>
                        <span class="redPrice">{{val.salesPrice}}</span>
                        <b class="grayPrice">{{val.marketPrice}}</b>
                        <p class="butt" @click="add(val)">加入购物车</p>
                    </figcaption>
                </figure>
            </div>
            <!--*******************松鼠新品*******************-->
            <h2>松鼠新品</h2>
            <div class="essential">
                <figure class="Pub-figure" v-for="(val, index) in products" :key="index">
                    <img :src="val.pic">
                    <figcaption class="Pub-figcaption">
                        <h2 class="Pub-figcp-h2">{{val.name}}</h2>
                        <span class="redPrice">{{val.salesPrice}}</span>
                        <b class="grayPrice">{{val.marketPrice}}</b>
                        <p class="butt" @click="add(val)">加入购物车</p>
                    </figcaption>
                </figure>
            </div>
            <!--*******************人气组合*******************-->
            <h2>人气组合</h2>
            <div class="essential">
                <figure class="Pub-figure" v-for="(val, index) in products" :key="index">
                    <img :src="val.pic">
                    <figcaption class="Pub-figcaption">
                        <h2 class="Pub-figcp-h2">{{val.name}}</h2>
                        <span class="redPrice">{{val.salesPrice}}</span>
                        <b class="grayPrice">{{val.marketPrice}}</b>
                        <p class="butt" @click="add(val)">加入购物车</p>
                    </figcaption>
                </figure>
            </div>
            <div class="HomeLoginFooter">
                <img src="../../static/img1/footerQurriel1.jpg">
                <img src="../../static/img1/footerQurriel2.jpg">
            </div>
    
            <router-link to="/shoppingCart" tag="div" class="icon-cart">
                <img src="../../static/img5/icon-cart.png" />
                <span v-show="showProductSum>0">{{showProductSum}}</span>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            products: [],
        }
    },
    methods: {
        add(item) {
            this.$store.commit("addProduct", item);
        }
    },
    mounted() {
        fetch("../../static/data/home/register.json")
            .then(res => res.json())
            .then(res => {
                this.products = res.data.products;
            })
    },
    computed: {
        showProductSum() {
            return this.$store.getters.productSum;
        }
    }
}
</script>

<style scoped>
.HomeLogin {
    position: fixed;
    z-index: 89;
}

.body {
    position: fixed;
    height: 93vh;
    overflow: scroll;
    top: .7rem;
    background: #f9f9f9;
}

.quan img {
    width: 50%;
    float: left
}

.body>h2 {
    clear: both;
    font-size: .26rem;
    height: .6rem;
    line-height: .6rem;
    color: pink;
    text-align: center;
    font-weight: normal;
    background: white;
    border-bottom: 5px solid #f9f9f9;
}
.HomeLoginFooter img {
    width: 50%;
    float: left;
}
/*公共样式*/
.borderp-top {
    line-height: .4rem;
    border-top: 5px solid #f9f9f9;
}

.butt {
    background: yellowgreen;
    border-radius: 3px;
    width: 97%;
    color: white;
    height: .35rem;
    line-height: .35rem;
    text-align: center;
}
/*重叠样式*/
.essential figure:nth-of-type(odd) {
    margin-right: .1rem;
}

.essential figure>img {
    width: 46.8vw;
}
.icon-cart{
    z-index: 100;
}
.icon-cart img {
    width: .55rem;
    height: .55rem;
    position: fixed;
    bottom: .35rem;
    left: 0.3rem;
}

.icon-cart span {
    position: fixed;
    bottom: .7rem;
    left: 0.7rem;
    color: white;
    display: block;
    width: .25rem;
    height: .25rem;
    background: orange;
    border-radius: 50%;
    text-align: center;
    font-style: bold;
}
</style>  